<template>
  <div class="edit">
    <div class="edit-item">
      <span class="label">修改头像</span>
      <upload-img
        :url="avatar"
        action="/api/upload?type=user"
        :imgMaxWidth="210"
        @imgUploadedUrl="
          (data) => {
            this.avatar = data.imgUrl;
          }
        "
      />
    </div>

    <div class="edit-item">
      <span class="label">修改名称</span>
      <div>
        <el-input
          v-model="name"
          class="create-input"
          placeholder="请输入修改名称"
        ></el-input>
      </div>
    </div>

    <div class="edit-item">
      <span class="label">个人简介</span>
      <div>
        <el-input
          v-model="sign"
          type="textarea"
          class="create-input"
          placeholder="请输入个人简介"
          :maxlength="50"
          show-word-limit
          :autosize="true"
        ></el-input>
      </div>
    </div>

    <div class="save">
      <el-button class="send" type="primary" size="medium" round @click="save">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import UploadImg from "@/components/upload-img";
import { userEdit } from "@/service";
export default {
  components: {
    UploadImg,
  },

  data() {
    const userInfo = this.$store.state.userInfo;
    return {
      avatar: userInfo.avatar,
      name: userInfo.name,
      sign: userInfo.sign,
    };
  },

  methods: {
    save() {
      userEdit({ name: this.name, sign: this.sign, avatar: this.avatar }).then(
        (res) => {
          if (res.code === 0) {
            this.$message({
              message: res.mes,
              type: "success",
            });
            // 跳转至个人空间页
            this.$router.push({
              name: "space",
            });
          }
        }
      );
    },
  },
};
</script>

<style>
.edit {
  background-color: #fff;
  padding: 10px 0 20px 20px;
}
.edit-item {
  display: flex;
  margin-bottom: 20px;
}
.edit-item .label {
  margin-right: 10px;
}
.save {
  margin-left: 45%;
}
.create-input{
  width: 300px;
}
</style>